﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContentDetail.ascx.cs" Inherits="VIT.Wedding.Modules.ContentDetail.ContentDetail" %>

<div class="contentdetails-sp">
    <div class=" library-sp">
        <div id="container">
            <div class="picture-slides-container">
                <div class="picture-slides-fade-container">
                    <a class="picture-slides-image-link">
                        <img class="picture-slides-image" src="<%# URLRoot %>Uploads/Images/Products/Details/<%#Eval("ImageName") %>" alt="" />
                    </a>
                </div>
                <ul class="picture-slides-thumbnails">
                    <asp:Repeater runat="server" ID="rptProductImage">
                        <ItemTemplate>
                            <li><a href="<%# URLRoot %>Uploads/Images/Products/Details/<%#Eval("ImageName") %>">
                                <img src="<%# URLRoot %>Uploads/Images/Products/Thumbs/<%#Eval("ImageName") %>" alt="" /></a></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>
    </div>
    <div class="thongtin-sp">
        <ul>
            <li>
                <h3>
                    <asp:Label runat="server" ID="lblName" EnableViewState="false" ForeColor="#eb6c87" Font-Size="Medium"></asp:Label></h3>
                <h3>
                    <strong>Loại: </strong><asp:Label runat="server" ID="lblType" EnableViewState="false"></asp:Label></h3>
                <h3>
                    <strong>Mô tả:</strong><br />
                    <asp:Label runat="server" ID="lblDescription" EnableViewState="false"></asp:Label></h3>
            </li>
        </ul>
        <ul>
            <li style="margin-top: 5px; border-bottom: 1px dashed #373534">
                <h4>
                    Giá:</h4>
                <h5>
                    <asp:Label runat="server" ID="lblPrice" EnableViewState="false"></asp:Label> VNĐ/bộ</h5>
            </li>
            <%--<li>
                <img src="images/number.png" /><img src="images/share.gif" />
            </li>--%>
        </ul>
    </div>
</div>

<script type="text/javascript">
    jQuery.PictureSlides.set({
        // Switches to decide what features to use
        useFadingIn: true,
        useFadingOut: true,
        useFadeWhenNotSlideshow: true,
        useFadeForSlideshow: true,
        useDimBackgroundForSlideshow: true,
        loopSlideshow: false,
        usePreloading: true,
        useAltAsTooltip: true,
        useTextAsTooltip: false,

        // Fading settings
        fadeTime: 500, // Milliseconds	
        timeForSlideInSlideshow: 2000, // Milliseconds

        // At page load
        startIndex: 1,
        startSlideShowFromBeginning: true,
        startSlideshowAtLoad: false,
        dimBackgroundAtLoad: false,

        // Large images to use and thumbnail settings
        images: [
        <asp:Repeater runat="server" ID="rptProductImageJava">
            <ItemTemplate>
                {
			        image: "<%# URLRoot %>Uploads/Images/Products/Details/<%#Eval("ImageName") %>",
			    },
            </ItemTemplate>
        </asp:Repeater>
		],
        thumbnailActivationEvent: "click",

        // Classes of HTML elements to use
        mainImageClass: "picture-slides-image", // Mandatory
        mainImageFailedToLoadClass: "picture-slides-image-load-fail",
        imageLinkClass: "picture-slides-image-link",
        fadeContainerClass: "picture-slides-fade-container",
        imageTextContainerClass: "picture-slides-image-text",
        previousLinkClass: "picture-slides-previous-image",
        nextLinkClass: "picture-slides-next-image",
        imageCounterClass: "picture-slides-image-counter",
        startSlideShowClass: "picture-slides-start-slideshow",
        stopSlideShowClass: "picture-slides-stop-slideshow",
        thumbnailContainerClass: "picture-slides-thumbnails",
        dimBackgroundOverlayClass: "picture-slides-dim-overlay"
    });
</script>
